<template>
  <div class="content-item mytabView">
    <h1 class="left-tit-more">
      <a class="tit">
        <span>用户回复情况统计</span>
      </a>
    </h1>
    <div class="top-tool">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <!-- <el-tab-pane label="回复留言时间" name="time"></el-tab-pane> -->
        <el-tab-pane label="回复留言数量" name="number"></el-tab-pane>
        <el-tab-pane label="回复留言评价" name="evaluate"></el-tab-pane>
      </el-tabs>
    </div>
    <div
      id="main1"
      ref="main1"
      style="height: 350px; width: 100%"
      v-loading="tableLoading1"
      v-show="activeName === 'number'"
    ></div>
    <div
      class="main2"
      id="main2"
      ref="main2"
      style="height: 350px; width: 100%"
      v-loading="tableLoading2"
      v-show="activeName === 'evaluate'"
    ></div>
  </div>
</template>
<script setup>
import { getReplySituations } from "@/api/count";
import { onMounted, ref, reactive, nextTick } from "vue";
import echarts from "@/utils/echarts";

const activeName = ref("number");

const main1 = ref(null); // 获取第一个图表的 dom
const main2 = ref(null); // 获取第二个图表的 dom
const params1 = reactive({ type: 1 });
const params2 = reactive({ type: 2 });
const data1 = reactive({ allInfo: {} });
const data2 = reactive({ allInfo: {} });

const tableLoading1 = ref(false);
const tableLoading2 = ref(false);
let myChart1;
let myChart2;

const handleClick = async (tab) => {
  activeName.value = tab.props.name;
  await nextTick(); // 等待 DOM 更新
  myChart1.resize(); // 重置第一个图表尺寸
  myChart2.resize();
};

const getPageView1 = async () => {
  tableLoading1.value = true;
  let res = await getReplySituations(params1);
  if (res.code == 20000) {
    data1.allInfo = res.data;
    let time = res.data.map((item) => item["user_name"]);
    let PV_data = res.data.map((item) => item["count"]);
    myChart1.setOption({
      xAxis: {
        data: time,
        name: '用户名',
        nameLocation: 'start',
        nameGap: 20,
      },
      yAxis: [
        {
          type: "value",
          name: "回复留言数量",
          nameLocation: 'end',
          nameGap: 12,
          position: "left",
          axisLine: {
            show: true,
          },
          axisLabel: {
            formatter: "{value}",
          },
        },
      ],
      series: [
        {
          name: "回复数量",
          data: PV_data,
        },
      ],
      legend: {
        show: false,
      },
    });
  }
  tableLoading1.value = false;
};

const getPageView2 = async () => {
  tableLoading2.value = true;
  let res = await getReplySituations(params2);
  if (res.code == 20000) {
    data2.allInfo = res.data;
    let user_name = res.data.map((item) => item["user_name"]);
    let satisfactionRate = res.data.map((item) => item["satisfactionRate"]);
    let satisfiedCount = res.data.map((item) => item["count"]);
    const allData = [...satisfactionRate, ...satisfiedCount];
    const minValue = Math.min(...allData);
    const maxValue = Math.max(...allData);

    myChart2.setOption({
      legend: {
        data: ["评级满意率", "评价满意数量"],
      },
      xAxis: {
        data: user_name,
        name: '用户名',
        nameLocation: 'start',
        nameGap: 20,
      },
      yAxis: [
        {
          type: "value",
          name: "评价满意数量",
          nameLocation: 'end',
          nameGap: 12,
          position: "left",
          axisLine: {
            show: true,
          },
          axisLabel: {
            formatter: "{value}",
          },
          min: 0,
          // max: maxValue,
        },
        {
          type: "value",
          name: "评级满意率",
          nameLocation: 'end',
          nameGap: 12,
          position: "right",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#4d99f2",
            },
          },
          axisLabel: {
            formatter: "{value}%",
          },
          min: minValue,
          max: maxValue,
        }
      ],
      series: [
        {
          name: "评级满意率",
          type: "line",
          yAxisIndex: 1,
          data: satisfactionRate,
          itemStyle: {
            color: "#4d99f2",
          },
        },
        {
          name: "评价满意数量",
          type: "bar",
          data: satisfiedCount,
          itemStyle: {
            color: "#ff9700",
          },
        },
      ],
    });
  }
  tableLoading2.value = false;
};

onMounted(async () => {
  myChart1 = echarts.init(main1.value);
  myChart2 = echarts.init(main2.value);

  myChart1.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      show: false,
    },
    grid: {
      top: "30",
      left: "80",
      right: "80",
      bottom: "60",
    },
    xAxis: [
      {
        type: "category",
        data: [],
        name: '用户名',
        nameLocation: 'start',
        nameGap: 20,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "留言数量",
        nameLocation: 'top',
        nameGap: 20,
        min: 0,
        // max: auto,
      },
    ],
    series: [
      {
        name: "留言数量",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: [],
        color: "#4d99f2",
      },
    ],
  });

  myChart2.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      show: false,
    },
    grid: {
      top: "30",
      left: "80",
      right: "80",
      bottom: "60",
    },
    xAxis: [
      {
        type: "category",
        data: [],
        name: '用户名',
        nameLocation: 'start',
        nameGap: 20,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "留言数量",
        nameLocation: 'start',
        nameGap: 20,
        min: 0,
        // max: 100,
      },
    ],
    series: [
      {
        name: "留言数量",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: [],
        color: "#4d99f2",
      },
    ],
  });

  await getPageView1();
  await getPageView2();

  window.onresize = function () {
    myChart1.resize();
    myChart2.resize();
    if (process.env.NODE_ENV === "development") console.log(11);
  };
});
</script>         
<style lang="scss" scoped>
.mytabView {
  position: relative;
  padding: 20px;
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(#000, 0.1);
  margin-top: 20px;
  .left-tit-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .tit {
      display: flex;
      align-items: center;
      font-size: 16px;
    }
    .more {
      font-size: 14px;
      color: #7f7f7f;
    }
  }
  .top-tool {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    .total {
      display: flex;
      .total-item {
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          color: #333333;
        }
        p {
          margin-left: 10px;
          width: 25px;
          height: 15px;
          border-radius: 2px;
        }
        &.pv p {
          background: #4d99f2;
        }
        &.uv {
          margin-left: 40px;
          p {
            background: #4d99f2;
          }
        }
      }
    }
    .btn-box {
      display: flex;
      border-radius: 4px;
      overflow: hidden;
      .btn {
        padding: 0 17px;
        font-size: 14px;
        line-height: 30px;
        background-color: rgba(#000, 0.04);
        color: #7f7f7f;
        border: 1px solid #dcdfe6;
        cursor: pointer;
        & + .btn {
          border-left: none;
        }
        &.active {
          border: none;
          background-color: $mainColor;
          color: #fff;
        }
      }
    }
  }
}
.main2{
  div {
    width: 100% !important;
  }
}
</style>
